<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>重新设置密码</title>
    <meta charset="utf-8">
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body align="center">

<!--
    1、当点击”提交“，若用户名为空，span里面显示‘请输入用户名’
    2、用户名不为空时，检查用户名格式，若格式不正确，span显示'用户名只能由数字和密码组成。
    3、'当密码为空，span显示‘请输入新密码’
    4、当新密码不为空，检查密码格式。span显示''
    5、确认密码为空，span显示'请确认密码'
    4、比较密码和确认密码是否一致，若不一致,span显示'密码和确认密码不一致'
    5、提交后ajax响应用户名是否存在。
-------------------------------------------------------------------------------------
修改版



-->



<h1>请修改密码</h1><br>
<hr>
    用户：<input type="text" name="username" id="username"/><br>
密码：<input type="password"  id="password"/><br>
确认密码：<input type="password" id="verify"/><br>
<span id="showSpan"></span>
<br>
<input type="button" value="提交" id="butt"/>

</body>
<script type="text/javascript" th:inline="javascript">
    window.onload=function (){
        const username=document.getElementById('username');
        const showSpan=document.getElementById('showSpan');
        const butt=document.getElementById('butt');
        const verify=document.getElementById('verify');
        const password=document.getElementById('password');
        const exp=/^[a-zA-Z0-9]+$/;
        butt.onclick=function (){
            if(username.value!=''){
                if(exp.test(username.value)){
                    /*
                    * 开始检查用户名是否存在
                    * */
                    const xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function (){
                        if(xhr.readyState==4&&xhr.status==200){
                            const data=xhr.responseText;
                            /*
                            判断密码
                            * */
                            if(password.value!=''){
                                if(exp.test(password.value)){
                                    if(verify.value!=''){
                                        /*
                                        比较密码和确认密码是否相同。
                                        这样写的原因是怕发送冲突
                                        * */

                                        if(password.value==verify.value){
                                            showSpan.innerHTML='';
                                            if(data=='用户名不存在'){
                                                showSpan.innerHTML=data;
                                            }else{
                                                /*
                                                * 后端执行更新密码的操作，并且返回更新成功页面。
                                                * */
                                                document.location.href='resetPasswordSuccess.html';
                                            }

                                        }else{
                                            showSpan.innerHTML='两次密码输入不一致';
                                        }
                                    }else{
                                        showSpan.innerHTML='请重新确认密码';
                                    }
                                }else{
                                    showSpan.innerHTML='密码只能由数字和字母组成';
                                }
                            }else{
                                showSpan.innerHTML='密码不能为空';
                            }
                        }

                    }
                    /*
                    * 补充一个更新密码的controller
                    * */
                    const userVal=username.value;
                    const passVal=password.value;
                    const str='reset?username='+userVal+'&&password='+passVal;
                    xhr.open('get',str,true);
                    xhr.send();

                }else{
                    showSpan.innerHTML='用户名只能由数字和密码组成';
                }


            }else{
                showSpan.innerHTML='用户名不能为空';
            }
        }

    }
</script>
</html>